<template>
  <el-card>
    <el-form label-width="80px">
       <!-- 第一行 S -->
      <el-row>
        <el-col :span="6">
          <el-form-item label="标签名称">
            <el-input v-model="form.tags" placeholder="请输入" size="small"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="城市">
             <el-select v-model="form.province" placeholder="请选择" size="small" style="width: 100%;">
                <el-option
                v-for="item in provinces"
                :key="item"
                :label="item"
                :value="item"
                ></el-option>
              </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="地区">
            <el-select v-model="form.city" placeholder="请选择" size="small" style="width: 100%;">
              <el-option
              v-for="item in citys"
              :key="item"
              :label="item"
              :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="企业名称">
            <el-input v-model="form.shortName" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第一行 E -->
    </el-form>

    <CardHeader>
      <template #left>
        <el-form label-width="80px">
          <el-row type="flex">
            <el-col>
              <el-form-item label="状态">
                <el-select v-model="searchForm.state" placeholder="请选择" size="small" style="width: 100%;">
                  <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label-width="40px">
                <el-button size="small" @click="handleClear">清除</el-button>
                <el-button size="small" type="primary" @click="handleSearch">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template #right>
          <el-button class="addBtn" type="success" icon="el-icon-edit" size="small" @click="handleAddUser">新增用户</el-button>
      </template>
    </CardHeader>

     <el-alert
      :title="'共 '+tableData.counts+' 条记录'"
      type="info"
      :closable="false"
      show-icon>
    </el-alert>

    <!-- table区域 S -->
     <el-table
      :data="tableData.items"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        >
        <template slot-scope="{row}">
          {{row.id}}
        </template>
      </el-table-column>
      <el-table-column
        prop="number"
        label="企业编号"
        >
      </el-table-column>
      <el-table-column
        prop="shortName"
        label="企业简称">
      </el-table-column>
      <el-table-column
        prop="tags"
        label="标签"
        >
      </el-table-column>
      <el-table-column
        prop="username"
        label="创建者"
        >
      </el-table-column>
      <el-table-column
        label="创建日期">
        <template slot-scope="{row}">
          {{row.addDate|parseTimeByString}}
        </template>
      </el-table-column>
      <el-table-column
        prop="remarks"
        label="备注"
        >
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        >
        <template slot-scope="{row}">
          {{status.find(item=>item.value===row.state).label}}
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作">
        <template slot-scope="{row}">
            <el-button
            type="primary"
            plain
            circle
            icon="el-icon-edit"
            @click="handleEdit(row.id)"
            ></el-button>
            <el-tooltip
            class="item"
            effect="dark"
            :content="buttonTips(row.state)"
            placement="top"
            >
              <el-button
              :type="buttonType(row.state)"
              plain
              circle
              :icon="buttonIcon(row.state)"
              @click="handleToggle(row)"
              ></el-button>
            </el-tooltip>

            <el-button
            type="danger"
            plain
            circle
            icon="el-icon-delete"
            @click="handleDelete(row.id)"
            ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- table区域 E -->

    <!-- 分页器组件 -->
    <Pagination
    :counts="tableData.counts"
    :page="{page:1,pagesize:10}"
    @changePageSize="changePageSize"
    @changeCurrentPage="changeCurrentPage"
    ></Pagination>

    <!-- 新增用户弹窗 S -->
    <CompanysAdd
    :titleInfo="titleInfo"
    :formBase="formBase"
    ref="companysAdd"
    @newDataes="newDataes"
    @clear-form="clearForm"
    ></CompanysAdd>
    <!-- 新增用户弹窗 E -->
  </el-card>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys.js'
import { status } from '@/api/hmmm/constants.js'
import { list as companyList, detail, disabled, remove } from '@/api/hmmm/companys.js'

import CompanysAdd from '../components/companys-add.vue'
export default {
  components: {
    CompanysAdd
  },
  data () {
    return {
      form: {
        page: 1,
        pagesize: 10,
        tags: '', // 标签名
        province: '', // 省份
        city: '', // 区域
        shortName: ''// 企业名称
      },
      searchForm: {
        state: null// 状态
      },
      formBase: {
        company: '', // 所属公司
        remarks: '', // 备注
        shortName: '', // 企业名称
        isFamous: false,
        province: '', // 省份
        city: '', // 区域
        tags: ''// 标签，方向
      },
      titleInfo: {
        text: '',
        pageTitle: '用户'
      },
      tableData: { counts: 0 },
      currentPage: 10
    }
  },

  computed: {
    provinces () {
      return provinces()
    },
    citys () {
      return citys(this.form.province)
    },
    status () {
      return status
    },
    buttonType (state) {
      return state => state === 0 ? 'success' : 'warning'
    },
    buttonIcon (state) {
      return state => state === 0 ? 'el-icon-check' : 'el-icon-close'
    },
    buttonTips (state) {
      return state => state === 0 ? '启用' : '禁用'
    }
  },

  created () {
    this.loadCompanyList()
  },

  methods: {
    // 获取列表数据
    async loadCompanyList () {
      const { data } = await companyList({ ...this.form, ...this.searchForm })
      this.tableData = data
    },
    // 点击清除
    handleClear () {
      this.form = {
        page: 1,
        pagesize: 10,
        tags: '',
        province: '',
        city: '',
        shortName: ''
      }
      this.searchForm = {
        state: null
      }
      this.loadCompanyList()
    },
    // 点击搜索
    handleSearch () {
      this.loadCompanyList()
    },
    // 点击添加用户
    handleAddUser () {
      this.titleInfo.text = '创建'
      this.$refs.companysAdd.dialogFormV()
    },
    // 有id是编辑,没id是添加
    newDataes (val) {
      this.loadCompanyList()
    },
    // 改变分页器尺寸
    changePageSize (val) {
      this.form.pagesize = val
      this.loadCompanyList()
    },
    // 改变分页器页码
    changeCurrentPage (val) {
      this.form.page = val
      this.loadCompanyList()
    },
    // 点击编辑
    async handleEdit (id) {
      const { data } = await detail({ id })
      this.titleInfo.text = '编辑'
      this.$refs.companysAdd.dialogFormV(data)
    },
    // 点击启用或禁用
    handleToggle (row) {
      console.log(row)
      this.$confirm(`已成功${row.state === 0 ? '启用' : '禁用'}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const state = row.state === 0 ? 1 : 0
        await disabled({ id: row.id, state })
        this.$message({
          type: 'success',
          message: `${row.state === 0 ? '启用' : '禁用'}成功！`
        })
        this.loadCompanyList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 点击删除按钮
    handleDelete (id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.$message({
          type: 'success',
          message: '成功删除了用户!'
        })
        this.loadCompanyList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    // 关闭弹层是清空表单
    clearForm () {
      this.formBase = {
        company: '', // 所属公司
        remarks: '', // 备注
        shortName: '', // 企业名称
        isFamous: false,
        province: '', // 省份
        city: '', // 区域
        tags: ''// 标签，方向
      }
    }
  }
}
</script>

<style scoped lang='less'>
.addBtn{
  height: 32px;
}
.el-table{
  margin: 10px 0;
}
</style>
